import { defineComponent, ref } from "vue";
import style from "./index.module.less";
import Form from "@/components/Form";
import { IFormItem, IFormRef } from "@/components/Form/types";
import DemoPage from "@/components/DemoPage";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
import ButtonView from "@/components/ButtonView";
export default defineComponent({
  name: "",
  setup() {
    const form = ref({ a21: "1" });
    const formRef = ref<IFormRef>();
    const render1 = () => {
      const data: IFormItem[] = [
        {
          label: "测试",
          type: "input",
          key: "a1",
        },
        {
          label: "测试",
          type: "switch",
          key: "a2",
        },
        {
          label: "测试",
          type: "upload",
          key: "a5",
        },
        {
          label: "测试",
          type: "textarea",
          key: "a5",
        },
        {
          label: "营业时间",
          type: "timePicker",
          keys: ["startDate", "endDate"],
          rules: [
            {
              required: true,
              message: "请输入营业时间",
            },
          ],
        },
        {
          label: "营业时间测试",
          type: "calendar",
          key: "productId",
          rules: [
            {
              regular: /d/,
            },
          ],
        },
        {
          label: "测试",
          type: "select",
          key: "a3",
          typeData: [
            {
              label: "测四哦",
              value: "1",
            },
            {
              label: "测四哦",
              value: "1",
            },
          ],
        },
      ];
      return <Form data={data} v-model={form.value} />;
    };
    const render2 = () => {
      const data: FormGroupPropsData[] = [
        {
          title: "",
          data: [
            {
              key: "a2",
              label: "农资介绍",
              type: "textarea",
              rules: [
                {
                  required: true,
                  message: "请输入内容",
                },
              ],
            },
          ],
        },
      ];
      return <FormGroup data={data} v-model={form.value} ref={formRef} />;
    };
    const onSubmit = () => {
      formRef.value?.submit(({ result, error }) => {
        console.log("s", result, error);
      });
    };
    return () => {
      const data = [
        {
          name: "基础表单",
          view: render1,
        },
        {
          name: "组合表单",
          view: render2,
          showCard: false,
        },
      ];
      return (
        <div>
          <DemoPage data={data} />
          <ButtonView text="提交" onClick={onSubmit} block />
        </div>
      );
    };
  },
});
